<script setup lang="ts">
  import { onMounted, computed } from 'vue'
  import { useAuthStore } from './stores/auth'
  import { useRoute } from 'vue-router'
  import HeaderComponent from './components/layout/HeaderComponent.vue'

  const authStore = useAuthStore()
  const route = useRoute()

  // Check if current route is auth page (login/register)
  const isAuthPage = computed(() => {
    return route.path === '/signin' || route.path === '/signup'
  })

  onMounted(() => {
    authStore.initializeAuth()
  })
</script>

<template>
  <div id="app" class="min-h-screen bg-white">
    <HeaderComponent v-if="!isAuthPage" />
    <main>
      <router-view />
    </main>
  </div>
</template>

<style>

  /* Global styles */
  html {
    scroll-behavior: smooth;
  }

  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
      sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Custom scrollbar */
  ::-webkit-scrollbar {
    width: 8px;
  }

  ::-webkit-scrollbar-track {
    background: #f1f1f1;
  }

  ::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
  }
</style>
